<template>
  <div class="dashboard-container">
    <el-row class="welcome">
      <el-col :offset="0">
        您好，{{ name }}，欢迎回来，上次登录时间：2021-05-20 22:12:29
      </el-col>
    </el-row>

    <el-row :gutter="10" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              {{ $t('dashboard.today_statistics') }}
            </div>
            <count-to
              :start-val="0"
              :end-val="102400"
              :duration="2600"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">{{ $t('dashboard.today_message') }}</div>
            <count-to
              :start-val="0"
              :end-val="81212"
              :duration="3000"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">{{ $t('dashboard.today_money') }}</div>
            <count-to
              :start-val="0"
              :end-val="9280"
              :duration="3200"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              {{ $t('dashboard.today_shopping') }}
            </div>
            <count-to
              :start-val="0"
              :end-val="13600"
              :duration="3600"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="day7-statistics">
              <!-- <svg-icon icon-class="chart" /> -->
              <span v-html="'&nbsp;&nbsp;'" />{{ $t('dashboard.day7') }}
            </span>
            <el-button class="more-statistics">
              {{ $t('dashboard.more_statistics') }}
            </el-button>
          </div>
          <wt-line-charts
            id="lineCharts"
            :title="chartsOptions.title"
            :xdate="chartsOptions.xdate"
            :xdata="chartsOptions.xdata"
            :yname="chartsOptions.yname"
            :ymin="chartsOptions.ymin"
            :ymax="chartsOptions.ymax"
            :legend-data="chartsOptions.legendData"
          />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span> <span v-html="'&nbsp;&nbsp;'" />操作系统统计 </span>
          </div>
          <pie-chart
            :name="systemPieOptions.name"
            :legend-data="systemPieOptions.legendData"
            :series-data="systemPieOptions.seriesData"
          />
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span> <span v-html="'&nbsp;&nbsp;'" />浏览器统计 </span>
          </div>
          <pie-chart
            :name="browserPieOptions.name"
            :legend-data="browserPieOptions.legendData"
            :series-data="browserPieOptions.seriesData"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <span v-html="'&nbsp;&nbsp;'" />{{ $t('dashboard.system_info') }}
        </span>
      </div>
      <el-table
        :data="systemInfo"
        border
        style="width: 100%"
        :show-header="false"
        :cell-class-name="HandleCellStyle"
        class="systemInfo"
      >
        <el-table-column prop="name1" align="right" />
        <el-table-column align="left">
          <template slot="header">
            <span />
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.value1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name2" align="right" />
        <el-table-column align="left">
          <template slot="header">
            <span />
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.value2 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name3" align="right" />
        <el-table-column align="left">
          <template slot="header">
            <span />
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.value3 }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-row class="copyright">
      <el-col :offset="0"><span v-html="$t('jishupu.copyright')" /></el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import WtLineCharts from '@/components/Echarts/lineCharts'
import PieChart from '@/components/Echarts/PieChart'
import CountTo from 'vue-count-to'

export default {
  name: 'Dashboard',
  components: {
    WtLineCharts,
    PieChart,
    CountTo
  },
  data() {
    return {
      chartsOptions: {
        xname: '日期',
        xdate: [
          '2021-5-1',
          '2021-5-2',
          '2021-5-3',
          '2021-5-4',
          '2021-5-5',
          '2021-5-6',
          '2021-5-7'
        ],
        xdata: [
          {
            name: '电脑网站',
            data: [820, 932, 20000, 300000, 400000, 50000, 5000],
            type: 'line',
            smooth: true
          },
          {
            name: '手机H5',
            data: [10, 1000, 300, 40000, 100, 2000, 50000],
            type: 'line',
            smooth: true
          },
          {
            name: '微信小程序',
            data: [40000, 500000, 50000, 3000, 70000, 20000, 500000],
            type: 'line',
            smooth: true
          }
        ],
        yname: '访问量',
        ymin: 0,
        ymax: 500000,
        legendData: ['电脑网站', '手机H5', '微信小程序']
      },
      systemPieOptions: {
        name: '操作系统',
        legendData: [
          'WINDOWS_10',
          'ANDROID6',
          'ANDROID5',
          'WINDOWS_7',
          'MAC_OS_X',
          'ANDROID4'
        ],
        seriesData: [
          { value: 155081, name: 'WINDOWS_10' },
          { value: 107802, name: 'ANDROID6' },
          { value: 82691, name: 'ANDROID5' },
          { value: 56453, name: 'WINDOWS_7' },
          { value: 39045, name: 'MAC_OS_X' },
          { value: 2012, name: 'ANDROID4' }
        ]
      },
      browserPieOptions: {
        name: '浏览器',
        legendData: [
          'CHROME',
          'CHROME_MOBILE',
          'EDGE',
          'MOBILE_SAFARI',
          'CHROME9',
          'FIREFOX8'
        ],
        seriesData: [
          { value: 204751, name: 'CHROME' },
          { value: 156665, name: 'CHROME_MOBILE' },
          { value: 108709, name: 'EDGE' },
          { value: 37467, name: 'MOBILE_SAFARI' },
          { value: 20926, name: 'CHROME9' },
          { value: 17100, name: 'FIREFOX8' }
        ]
      },
      systemInfo: [
        {
          name1: '系统版本',
          value1: 'vue-admin-jishupu V1.0.0',
          name2: '服务器软件',
          value2: 'PHP/7.3 NGINX/1.16',
          name3: '数据库',
          value3: 'MYSQL/5.7'
        },
        {
          name1: '后端开发框架',
          value1: 'LARAVEL/8',
          name3: '前端开发框架',
          value3: 'VUE/2.6.10',
          name2: '前端组件库/UI',
          value2: 'ELEMENT UI/2.13.2 ELEMENT-TEMPLATE-ADMIN'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  methods: {
    HandleCellStyle({ row, column, rowIndex, columnIndex }) {
      return columnIndex % 2 === 0 ? 'cellStyle' : ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
.dashboard {
  &-container {
    padding: 20px;
    .welcome {
      padding: 20px;
      margin-bottom: 15px;
      background-color: white;
      // border: 1px solid #{$border-color-lighter};
      // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.05);
    }
    .line-charts {
      padding: 20px;
    }

    .panel-group {
      margin-top: 18px;

      .card-panel-col {
        margin-bottom: 20px;
      }

      .card-panel {
        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.05);

        &:hover {
          .card-panel-icon-wrapper {
            color: #fff;
          }

          .icon-people {
            background: #40c9c6;
          }

          .icon-message {
            background: #36a3f7;
          }

          .icon-money {
            background: #f4516c;
          }

          .icon-shopping {
            background: #34bfa3;
          }
        }

        .icon-people {
          color: #40c9c6;
        }

        .icon-message {
          color: #36a3f7;
        }

        .icon-money {
          color: #f4516c;
        }

        .icon-shopping {
          color: #34bfa3;
        }

        .card-panel-icon-wrapper {
          float: left;
          margin: 14px 0 0 14px;
          padding: 16px;
          transition: all 0.38s ease-out;
          border-radius: 6px;
        }

        .card-panel-icon {
          float: left;
          font-size: 48px;
        }

        .card-panel-description {
          float: right;
          font-weight: bold;
          margin: 26px;
          margin-left: 0px;

          .card-panel-text {
            line-height: 18px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 16px;
            margin-bottom: 12px;
          }

          .card-panel-num {
            font-size: 20px;
          }
        }
      }
    }

    .box-card {
      margin-bottom: 20px;
      .day7-statistics {
      }
      .more-statistics {
        padding: 0;
        float: right;
        border: 0;
      }
    }

    ::v-deep .systemInfo tbody tr:hover > td {
      background-color: initial;
    }

    ::v-deep .cellStyle {
      background-color: #{$background-color-extra} !important;
    }

    .copyright {
      padding: 20px 0;
      height: 40px;
      text-align: center;
      border-top: 1px solid #{$border-color-lighter};
    }
  }
}
</style>
